<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="handleAdd()"
            >立即创建</el-button
          >
          <el-button type="primary" size="mini" @click="handleSearch()"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top: 1%"
    >
      <el-table-column label="所属园区" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="介绍" align="center">
        <template slot-scope="scope">
          {{ scope.row.describe }}
        </template>
      </el-table-column> -->

      <el-table-column label="联系人" align="center">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>

      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>

      <el-table-column label="图片" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.pictures.length != 0 ? scope.row.pictures : "" }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          {{ (scope.row.type = 1 ? "正常" : "停用") }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.creationTime | formatYmd }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <!-- <el-button type="primary" size="mini" @click="handlerDetails(scope.row.id)">详情</el-button> -->
          <el-button type="success" size="mini" @click="addPark(scope.row.id)"
            >添加楼宇</el-button
          >
          <el-button size="mini" @click="addPark(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDel(scope.row.id)"
            >停用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogDetailsVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-table :data="buildingVoList" style="width: 100%">
        <el-table-column prop="name" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="type" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" placeholder="楼宇名称"></el-input>
        </el-form-item>
        <el-form-item label="楼宇状态">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getParkList,
  addBuildingk,
  addPark,
  getParbyId,
  getParkUpdate,
  delPark,
} from "@/api/room";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogDetailsVisible: false,
      list: null,
      listLoading: true,
      where: {
        pageSize: 15,
        currentPage: 1,
      },
      currentPage4: null,
      total: 20,
      form: {
        name: "",
        parkId: null,
        delivery: true,
        type: 1,
      },
      buildingVoList: [],
      formPark: {
        name: "高新园区111",
        address: "科园南二路6号",
        type: 1,
        phone: "",
        username: "",
        describe: "12131313",
        pictureIds: [],
        buildingVoList: [
          {
            address: "成都市高新区创业路49号",
            name: "A栋11223",
            type: 1,
          },
        ],
      },
    };
  },
  created() {
    console.log("123123" + this.where);
    this.fetchData(this.where);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getParkList(obj).then((response) => {
        console.log(response);
        this.listLoading = false;
        this.list = response.data;
      });
    },
    handleSearch() {
      this.fetchData(this.where);
    },
    handleAdd() {
      addPark(this.formPark).then(() => {
        this.dialogVisible = false;
       // this.fetchData(this.where);
      });
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    handlerDetails(id) {
      console.log(id);
      getParbyId(id).then((res) => {
        console.log(res);
        this.dialogDetailsVisible = true;
        this.buildingVoList = res.data.buildingVoList;
      });
    },
    addPark(id) {
      this.dialogVisible = true;
      this.form.parkId = id;
    },
    handleClose() {
      this.dialogVisible = false;
      this.dialogDetailsVisible = false;
    },
    onSubmit() {
      addBuildingk(this.form).then(() => {
        this.dialogVisible = false;
        this.fetchData(this.where);
      });
    },
    handleDel(id) {
      console.log(id);
      delPark(id).then(() => {
        this.dialogVisible = false;
        this.fetchData(this.where);
      });
    },
  },
};
</script>
